<template>
  <el-container class="h-screen">
    <el-container>
      <!-- 主内容区 -->
      <el-main>
        <!-- 操作栏 -->
        <el-row class="mb-4" :gutter="20">
          <el-col :span="6">
            <el-input v-model="searchCity" placeholder="搜索城市" clearable />
          </el-col>
          <el-col :span="4">
            <el-select v-model="dangerLevel" placeholder="危险程度" clearable>
              <el-option label="严重缺陷" value="serious" />
              <el-option label="中等缺陷" value="medium" />
              <el-option label="轻微缺陷" value="slight" />
            </el-select>
          </el-col>
          <el-col :span="14" class="text-right">
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-col>
        </el-row>

        <!-- 数据表格 -->
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          style="margin-top: 10px"
        >
          <el-table-column type="index" width="60" label="序号" align="center" />
          <el-table-column prop="risk" label="危险程度" width="100">
            <template #default="{ row }">
              <el-tag :type="getDangerType(row.risk)">
                {{ formatDangerLevel(row.risk) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="上传时间" width="150" align="center" />
          <!-- 在el-table-column risk列之后添加状态列 -->
          <el-table-column prop="status" label="审核状态" width="120" align="center">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ formatStatus(row.status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="image" label="照片" width="140" align="center">
            <template #default="{ row }">
              <el-image style="width: 100px; height: 60px" :src="row.image" fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="createUserName" label="上传者" width="120" />
          <el-table-column prop="city" label="所在城市" width="120" align="center" />

          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <el-button type="success" size="small" @click="handleApprove(row)"> 通过 </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleReject(row)"
                :disabled="row.status === 0"
              >
                驳回
              </el-button>
              <el-button type="info" size="small" @click="handleDetail(row)"> 详情 </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-main>
    </el-container>
  </el-container>

  <!-- 详情对话框 -->
  <el-dialog v-model="detailVisible" title="缺陷详情" width="600px">
    <!-- 两列布局 -->
    <el-row :gutter="20">
      <!-- 照片列 -->
      <el-col :span="12">
        <el-image class="detail-image" :src="detailData.image" fit="cover" hide-on-click-modal>
          <template #error>
            <div class="image-error">
              <el-icon><Picture /></el-icon>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
      </el-col>

      <!-- 信息列 -->
      <el-col :span="12">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="危险程度">
            <el-tag :type="getDangerType(detailData.risk)">{{
              formatDangerLevel(detailData.risk)
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="上传者">
            {{ detailData.createUserName }}
          </el-descriptions-item>

          <el-descriptions-item label="经纬度信息">
            {{ detailData.longitude }}
            {{ detailData.latitude }}
          </el-descriptions-item>
          <el-descriptions-item label="上传时间">
            {{ detailData.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="所在城市">
            {{ detailData.city }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <!-- 补充信息 -->
    <div class="remark-section">
      <h4>缺陷描述：</h4>
      <p class="remark-content">
        {{ detailData.description ? detailData.description : '暂无描述' }}
      </p>
    </div>

    <template #footer>
      <el-button @click="detailVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUnJudgeList, approval } from '@/api/judge'
import { Picture } from '@element-plus/icons-vue'
import { updateHole } from '@/api/hole'

// 详情数据示例
const detailData = ref({})

// 添加分页当前页变量
const currentPage = ref(1)

const detailVisible = ref(false)

// 暴露打开方法
defineExpose({
  open: () => (detailVisible.value = true),
})
// 表格数据
const tableData = ref([])

// 搜索条件

// 搜索条件
const searchCity = ref('')
const dangerLevel = ref('')
const pageSize = ref(5)
const total = ref(0)
const loading = ref(false)
//const selectedRows = ref([])

// 危险等级格式化
const formatDangerLevel = (level) => {
  const map = { serious: '严重缺陷', medium: '中等缺陷', slight: '轻微缺陷' }
  return map[level] || '未知'
}

// 危险等级标签类型
const getDangerType = (level) => {
  const map = { serious: 'danger', medium: 'warning', slight: 'success' }
  return map[level] || ''
}

const handleReject = (row) => {
  ElMessageBox.confirm('确定要拒绝该条目吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    row.status = 0
    console.log(row)
    const res = await updateHole(row)
    if (res.data.code === 1) ElMessage.success('操作成功')
    else ElMessage.error('操作失败')
    // 更新数据
    fetchData()
  })
}

// 分页变化
const handlePageChange = (currentPage) => {
  fetchData(currentPage)
}

//
const handleSizeChange = (val) => {
  currentPage.value = 1
  pageSize.value = val

  fetchData(1)
}

// 修改后的数据获取方法
const fetchData = async (page = 1) => {
  currentPage.value = page
  loading.value = true
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      city: searchCity.value,
      risk: dangerLevel.value, // 根据实际接口字段名调整（这里是示例）
    }

    const res = await getUnJudgeList(params)
    tableData.value = res.data.data.records
    total.value = res.data.data.total
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  fetchData()
})

const handleDetail = (row) => {
  console.log(row)
  detailData.value = row
  detailVisible.value = true
}

// 审核操作
const handleApprove = async (row) => {
  try {
    // 调用API更新状态
    const res = await approval(row.id)

    if (res.data.code === 1) ElMessage.success('审核通过')
    else ElMessage.error('审核失败')

    // 更新数据
    fetchData()
  } catch {
    ElMessage.error('操作失败')
  }
}

// 状态格式化
const formatStatus = (status) => {
  const map = { 0: '不通过', 1: '待审核', 2: '已通过' }
  return map[status] || '未知状态'
}

// 状态标签类型
const getStatusType = (status) => {
  const map = { 0: 'danger', 1: 'info', 2: 'success' }
  return map[status] || ''
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

// 重置处理
const handleReset = () => {
  searchCity.value = ''
  dangerLevel.value = ''
  fetchData(1)
}
</script>

<style lang="scss" scoped>
.el-image {
  cursor: pointer;
  transition: transform 0.3s;
}
.el-image:hover {
  transform: scale(1.1);
}

.detail-image {
  width: 100%;
  height: 300px;
  border-radius: 4px;
  background: #f5f7fa;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
}

.remark-section {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.remark-content {
  margin: 10px 0 0;
  color: #606266;
  line-height: 1.6;
}

:deep(.el-descriptions__body) {
  background: #f8f9fa;
}
</style>
